<!--
 * @Author: Y先森
 * @Date: 2023-05-09 10:31:12
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-10 10:50:13
 * @FilePath: \y-website\src\views\creation\components\pages\article\index.vue
-->
<template>
  <div class="article scrollbar-none text-zinc-900" :class="className ">
    <div class="text-base font-semibold pb-3 title dark:text-zinc-50">写作</div>
    <div :class="className=='one'?'h-[5rem]':'h-[2rem]'" class="w-full bg-white dark:bg-indigo-dark-d dark:hover:bg-[#313966] duration-300 rounded flex justify-between article-li mb-3">
      <img v-lazy :class="className=='one'?'w-22':'w-12'" class=" h-full rounded mr-2 block" src="@/assets/images/vue-01.png" alt="" />
      <div class="box-border py-1">
        <h2 :class="className=='one'?'text-base':'text-sm'" class="text-base font-semibold article-title dark:text-zinc-50">Vue3创建项目（一）新手教程www</h2>
        <p class="text-grey mt-2 text-sm describe dark:text-zinc-200">
          Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。
        </p>
      </div>
    </div>
    <div :class="className=='one'?'h-[5rem]':'h-[2rem]'" class="w-full bg-white dark:bg-indigo-dark-d dark:hover:bg-[#313966] duration-300 rounded flex justify-between article-li mb-3">
      <img v-lazy :class="className=='one'?'w-22':'w-12'" class=" h-full rounded mr-2 block" src="@/assets/images/vue-01.png" alt="" />
      <div class="box-border py-1">
        <h2 :class="className=='one'?'text-base':'text-sm'" class="text-base font-semibold article-title dark:text-zinc-50">Vue3创建项目（一）新手教程www</h2>
        <p class="text-grey mt-2 text-sm describe dark:text-zinc-200">
          Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。
        </p>
      </div>
    </div>
    <div :class="className=='one'?'h-[5rem]':'h-[2rem]'" class="w-full bg-white dark:bg-indigo-dark-d dark:hover:bg-[#313966] duration-300 rounded flex justify-between article-li mb-3">
      <img v-lazy :class="className=='one'?'w-22':'w-12'" class=" h-full rounded mr-2 block" src="@/assets/images/vue-01.png" alt="" />
      <div class="box-border py-1">
        <h2 :class="className=='one'?'text-base':'text-sm'" class="text-base font-semibold article-title dark:text-zinc-50">Vue3创建项目（一）新手教程www</h2>
        <p class="text-grey mt-2 text-sm describe dark:text-zinc-200">
          Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。
        </p>
      </div>
    </div>
    <div :class="className=='one'?'h-[5rem]':'h-[2rem]'" class="w-full bg-white dark:bg-indigo-dark-d dark:hover:bg-[#313966] duration-300 rounded flex justify-between article-li mb-3">
      <img v-lazy :class="className=='one'?'w-22':'w-12'" class=" h-full rounded mr-2 block" src="@/assets/images/vue-01.png" alt="" />
      <div class="box-border py-1">
        <h2 :class="className=='one'?'text-base':'text-sm'" class="text-base font-semibold article-title dark:text-zinc-50">Vue3创建项目（一）新手教程www</h2>
        <p class="text-grey mt-2 text-sm describe dark:text-zinc-200">
          Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。Vue3创建项目，新手教程，看完需要花费10分钟，Vue依赖NodeJs
          的环境，需要先安装Nodejs。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  className:{
    type:String,
    default:''
  }
})
</script>
<style scoped lang="scss"></style>

<script setup>
</script>
<style scoped lang='scss'>
.one .article-li {
  @apply p-2
}
.one .describe {
  display: block;
}
.title {
  display: block;
}
.describe {
  display: none;
}
</style>